<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="box">
        <p><span>姓名</span><input name="userName" type="text" placeholder="只能包含数字字母下划线,且数字不能开头,长度在8~16之间"></p>
        <p><span>联系电话</span><input name="userPhone" type="text" placeholder="请输入您的电话号码" maxlength="11"></p>
        <p><span>学历</span><input name="userEdu" type="text" placeholder="请输入您的学历"></p>
        <p><span>年龄</span><input name="userAge" type="text" placeholder="请输入您的年龄"></p>
        <p><span>薪资</span><input name="salary" type="text" placeholder="请输入您的薪资"></p>
        <div><button name="bao">保存</button><button name="reset">重置</button></div>
    </div>

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>联系电话</th>
                <th>学历</th>
                <th>年龄</th>
                <th>期望薪资</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        let oBox = document.querySelector('.box');
        let oIpts = document.querySelectorAll('input');
        let oTable = document.querySelector('table');
        let oTbody = document.querySelector('tbody');
        let oBtnB = document.querySelector('[name="bao"]');
        let oBtnR = document.querySelector('[ name="reset"]');

        let obj = {};

        let userName;
        let userPhone;
        let userEdu;
        let userAge;
        let salary;

        let valueObj;

        oIpts[0].addEventListener('change', function () {

            userName = oIpts[0].value;

            if (/^\w{8,16}$/.test(userName)) {

                oIpts[0].style.borderColor = 'green';

            } else {

                oIpts[0].style.borderColor = 'red';
            }


        })

        oIpts[1].addEventListener('change', function () {

            userPhone = oIpts[1].value;

            if (/^\d{11}$/.test(userPhone)) {

                oIpts[1].style.borderColor = 'green';

            } else {

                oIpts[1].style.borderColor = 'red';
            }

        })


        oIpts[2].addEventListener('change', function () {

            userEdu = oIpts[2].value;

            if (userEdu !== '') {

                oIpts[2].style.borderColor = 'green';

            } else {

                oIpts[2].style.borderColor = 'red';
            }

        })

        oIpts[3].addEventListener('change', function () {

            userAge = oIpts[3].value;

            if (userAge >= 0) {

                oIpts[3].style.borderColor = 'green';

            } else {

                oIpts[3].style.borderColor = 'red';
            }

        })

        oIpts[4].addEventListener('change', function () {

            salary = oIpts[4].value;

            if (salary >= 0) {

                oIpts[4].style.borderColor = 'green';

            } else {

                oIpts[4].style.borderColor = 'red';
            }

        })



        function setPage() {

            if (valueObj.length === 0) {

                oTbody.innerHTML = `<tr><td  colspan="6">没有匹配的数据</td></tr>`

            } else {

                let str = '';

                valueObj.forEach(function (item, key) {

                    str += `
            <tr>
                <td>${item.userName}</td>
                <td>${item.userPhone}</td>
                <td>${item.userEdu}</td>
                <td>${item.userAge}</td>
                <td>${item.salary}</td>
                <td><button name='gai' index=${key}>修改</button> <button name='del' index=${key}>删除</button></td>
            </tr>`

                })

                oTable.style.display = 'block';

                oTbody.innerHTML = str;

            }
        }


        oBtnB.addEventListener('click', function () {

            userName = oIpts[0].value;
            userPhone = oIpts[1].value;
            userEdu = oIpts[2].value;
            userAge = oIpts[3].value;
            salary = oIpts[4].value;

            obj = {
                userName: userName,
                userPhone: userPhone,
                userEdu: userEdu,
                userAge: userAge,
                salary: salary
            }

            valueObj = window.localStorage.getItem('value');

            if (valueObj === null) {

                window.localStorage.value = JSON.stringify([obj]);
                valueObj = JSON.parse(window.localStorage.value);

            } else {

                valueObj = JSON.parse(window.localStorage.value);

                if (valueObj.length === 0) {

                    valueObj.unshift(obj);
                    window.localStorage.value = JSON.stringify(valueObj);
                    valueObj = JSON.parse(window.localStorage.value);

                    return;

                } else {

                    for (let i = 0; i <= valueObj.length - 1; i++) {

                        if (valueObj[i].userName !== obj.userName) {

                            valueObj.unshift(obj);
                            window.localStorage.value = JSON.stringify(valueObj);
                            valueObj = JSON.parse(window.localStorage.value);

                            break;

                        }

                    }
                }

                setPage();

                oIpts[0].value = '';
                oIpts[1].value = '';
                oIpts[2].value = '';
                oIpts[3].value = '';
                oIpts[4].value = '';

            }

        })


        oBtnR.addEventListener('click', function () {

            oIpts[0].value = '';
            oIpts[1].value = '';
            oIpts[2].value = '';
            oIpts[3].value = '';
            oIpts[4].value = '';

        })


        oTable.addEventListener('click', function (event) {

            if (event.target.getAttribute('name') === 'del') {

                if (!window.confirm('您确定删除吗')) return;

                var index = Number(event.target.getAttribute('index'));

                valueObj.splice(index, 1);

                window.localStorage.value = JSON.stringify(valueObj);
                valueObj = JSON.parse(window.localStorage.value);

                setPage();

                oBox.style.display = 'block';

            } else if (event.target.getAttribute('name') === 'gai') {

                var index = Number(event.target.getAttribute('index'));

                valueObj.splice(index, 1);

                window.localStorage.value = JSON.stringify(valueObj);
                valueObj = JSON.parse(window.localStorage.value);

                setPage();

                oBox.style.display = 'block';

                oBtnB.addEventListener('click', function () {

                    userName = oIpts[0].value;
                    userPhone = oIpts[1].value;
                    userEdu = oIpts[2].value;
                    userAge = oIpts[3].value;
                    salary = oIpts[4].value;

                    obj = {
                        userName: userName,
                        userPhone: userPhone,
                        userEdu: userEdu,
                        userAge: userAge,
                        salary: salary
                    }

                    window.localStorage.value = JSON.stringify(valueObj);
                    valueObj = JSON.parse(window.localStorage.value);

                    setPage();

                })
            }

        })






    </script>
</body>

</html>